<template>
	<div class="flex flex-col">
		<div class="text-sm">【大区异常处理】</div>
		<div ref="echartsContainerRef" class="flex-1"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	// 系列中的对象_生成器
	const createdSeriesConfig = () => ({
		type: 'pie',

		// 逆时针方向
		clockwise: false,
		// 取消悬浮动画
		hoverAnimation: false,
		// 不显示标签
		label: { show: false },

		// 数据
		data: [],
	});

	// series生成器
	const seriesGenerator = () => {
		// 仓库数据
		const regions = visualizationStore.data.regionData.regions;
		// 整合后的series数组
		const seriesArr = [];

		regions.forEach((regionItem, index) => {
			const seriesConfig = createdSeriesConfig();

			// 生成 (value ~ value*2) - value 的随机数, 当做未完成的值
			const unfinished =
				Math.floor(Math.random() * (regionItem.value * 2 - regionItem.value) + regionItem.value) - regionItem.value;

			// 修改内径和外径
			seriesConfig.radius = [`${80 - index * 15}%`, `${90 - index * 15}%`];

			// 添加已完成的数据
			seriesConfig.data.push({
				name: regionItem.name,
				value: regionItem.value,

				type: 'ok',
				anomalyCount: unfinished + regionItem.value,
			});

			// 添加未完成的数据
			seriesConfig.data.push({
				name: regionItem.name,
				value: unfinished,
				itemStyle: { color: '#ccc' },

				type: 'no',
				anomalyCount: unfinished + regionItem.value,
				// 已完成数量
				doneCount: regionItem.value,
			});

			seriesArr.push(seriesConfig);
		});

		return seriesArr;
	};

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// Echarts渲染配置项
		renderOptions: () => {
			return {
				legend: {
					show: true,
					icon: 'circle',
					orient: 'vertical',
					right: 0,
					textStyle: { color: '#fff' },
				},
				tooltip: {
					show: true,
					formatter: (params) => {
						const { data } = params;

						// 异常总数
						const anomalyCount = data.anomalyCount;
						// 已处理异常
						const doneCount = data.type === 'ok' ? data.value : data.doneCount;
						// 未处理异常
						const noCount = data.type === 'ok' ? anomalyCount - doneCount : data.value;

						let htmlVal = `
							<div>
								<span style="color: red;">${params.name}</span>
								<span>共</span>
								<span style="color: red;">${anomalyCount}</span>
								<span>起异常</span>
							</div>

							<div style="margin-left: 5px;">
								<span style="color: red;">* 已处理</span>
								<span style="color: red;">${doneCount}</span>
							</div>

							<div style="margin-left: 5px;">
								<span style="color: red;">* 待处理</span>
								<span style="color: red;">${noCount}</span>
							</div>
						`;

						return htmlVal;
					},
				},
				series: seriesGenerator(),
			};
		},
	});
</script>

<style scoped></style>
